<script>
import {deleteUser, pageUser, saveUser, updateUser} from "../../api/user";
import {ElMessage} from "element-plus";
import {getDate} from "../../utils/WebUtil";

export default {
    name: "User",
    data() {
        return {
            userList: [],
            params: {
                current: 1,
                size: 10,
                descs:'updateTime',
            },
            pageInfo: {
                pages: 0,
                total: 0,
            },
            user: {},
            showEditFlag: false,
            editTitle: '添加用户',
            selectList:[]
        }
    },
    methods: {
        handleSelection(selection ){
            this.selectList=selection.map(item=> item.id)
        },
        deleteList(){
            deleteUser(this.selectList)
            .then(res=>{
                if(res.code===200){
                    ElMessage.success('删除成功')
                    this.getUserList()
                }
                else ElMessage.error('删除失败')
            })
        },
        deleteItem(id){
            deleteUser([id])
                .then(res=>{
                    if(res.code===200){
                        ElMessage.success('删除成功')
                        this.getUserList()
                    }
                    else ElMessage.error('删除失败')
                })
        },
        confirm() {
            //判断是更新还是添加
            if(this.user.id){
                this.update()
            }else this.add()
            this.showEditFlag=false
        },
        showEdit(edit, data) {
            this.showEditFlag = true
            this.user = data
            if (edit)
                this.editTitle = '更新用户'
            else
                this.editTitle = '添加用户'
        },
        add() {
            saveUser(this.user)
                .then(res => {
                    if (res.code === 200) {
                        ElMessage.success('添加成功')
                    } else ElMessage.error('添加失败')
                })
        },
        update() {
            updateUser(this.user)
                .then(res => {
                    if (res.code === 200) {
                        ElMessage.success('更新成功')
                    } else ElMessage.error('更新失败')
                })
        },
        getUserList() {
            pageUser(this.params)
                .then(res => {
                    if (res.code === 200) {
                        this.userList = res.data.records;
                        this.pageInfo.pages = res.data.pages;
                        this.pageInfo.total = res.data.total;
                    }
                })
        },
        handleSizeChange(size) {
            this.params.size = size
            this.params.current = 1
            this.getUserList()
        },
        handleCurrentChange(cur) {
            this.params.current = cur
            this.getUserList()
        },
        tableIndex(index) {
            return (this.params.current - 1) * this.params.size + index + 1;
        },
        getDate(row,column){
            return getDate(row.updateTime)
        }
    },
    mounted() {
        this.getUserList()
    }
}
</script>

<template>
    <div class="flex column" style="width: 100%;height: 100%;">
        <div class="flex align-center space-between" style="margin: 0 30px;width: calc(100% - 60px);height: 100px;">
            <div class="flex row">
                <el-input style="width: 200px"/>
                <el-button>搜索</el-button>
            </div>
            <div class="flex row">
                <el-button @click="showEdit(false,{})">添加</el-button>
                <el-popconfirm
                    confirm-button-text="OK"
                    cancel-button-text="No"
                    icon-color="red"
                    @confirm="deleteList"
                    title="确定删除?">
                    <template #reference>
                        <el-button type="danger">批量删除</el-button>
                    </template>
                </el-popconfirm>
            </div>

        </div>
        <el-table @selection-change="handleSelection" ref="table" :data="userList" class="table" :stripe="true">
            <el-table-column type="selection" width="55"/>
            <el-table-column label="序号" type="index" :index="tableIndex" width="55"/>
            <el-table-column prop="id" label="ID"/>
            <el-table-column prop="code" label="编号"/>
            <el-table-column prop="account" label="账号"/>
            <el-table-column prop="phone" label="手机号"/>
            <el-table-column prop="realName" label="真名"/>
            <el-table-column prop="name" label="名称"/>
            <el-table-column prop="updateTime" sortable  label="更新时间" :formatter="getDate"/>
            <el-table-column fixed="right" label="操作" width="150">
                <template #default="scope">
                    <el-button type="text" size="small" style="color: #42b983">详细</el-button>
                    <el-button type="text" size="small" @click="showEdit(true,scope.row)">编辑</el-button>
                    <el-popconfirm
                        confirm-button-text="OK"
                        cancel-button-text="No"
                        icon-color="red"
                        @confirm="deleteItem(scope.row.id)"
                        title="确定删除?">
                        <template #reference>
                            <el-button type="text" size="small" style="color: red">删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background layout="sizes, prev, pager, next"
                       :page-count="pageInfo.pages"
                       :page-size="params.size"
                       :current-page="params.current"
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       :total="pageInfo.total"/>
    </div>
    <el-dialog
        width="500px"
        :title="editTitle"
        v-model="showEditFlag">
        <el-form :model="user"
                 label-width="auto"
                 label-position="right">
            <el-form-item label="账号">
                <el-input v-model="user.account"></el-input>
            </el-form-item>
            <el-form-item label="用户名">
                <el-input v-model="user.name"></el-input>
            </el-form-item>
            <el-form-item label="手机号">
                <el-input v-model="user.phone"></el-input>
            </el-form-item>
            <el-form-item label="真实名称">
                <el-input v-model="user.realName"></el-input>
            </el-form-item>
            <el-form-item label="用户头像">
                <el-input v-model="user.avatar"></el-input>
            </el-form-item>
            <el-form-item label="出生日期">
                <el-date-picker style="width: 100%" v-model="user.birthday" type="month" placeholder="选择日期"></el-date-picker>
            </el-form-item>
            <el-form-item label="用户邮箱">
                <el-input v-model="user.email"></el-input>
            </el-form-item>
            <el-form-item label="用户性别">
                <el-radio v-model="user.sex" :label="true" size="large">男</el-radio>
                <el-radio v-model="user.sex" :label="false" size="large">女</el-radio>
            </el-form-item>
            <el-form-item label="用户角色">
                <el-input v-model="user.roleId"></el-input>
            </el-form-item>
            <el-form-item label="用户状态">
                <el-switch
                    v-model="user.status"
                    active-text="正常"
                    inactive-text="禁用"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    active-value="open"
                    inactive-value="lock"
                />
            </el-form-item>
            <el-form-item>
                <div class="flex align-center space-between" style="width: 100%;margin-top: 15px">
                    <el-button @click="showEditFlag=false">取消</el-button>
                    <el-button @click="confirm" type="success">保存</el-button>
                </div>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>

<style scoped>
:deep(.el-table__body-wrapper) {
    z-index: 1;
    height: 700px;
}

.table {
    height: 100%;
}
</style>
